<template>
  <div class="userinfo">
    <div class="header_right" @click="drawer = true">
      <img src="../../../assets/images/user.png" alt="" />
      <span>{{ userinfo.user_name }}</span>
    </div>
    <el-drawer title="个人中心" :visible.sync="drawer" :direction="direction">
      <span>
        <el-card class="box-card">
          <div class="text item">
            <p>个人信息</p>
            <Userinfo2>
              <template #default>
                <el-card class="box-card">
                <div class="text item1">
                  <p>用户名：{{ userinfo.user_name }}</p>
                </div>
                <div class="text item1">
                  <p>用户ID：{{ userinfo.user_id }}</p>
                </div>
                <div class="text item1">
                  <p>身份信息：{{ userinfo.identity_text }}</p>
                </div>
                <div class="text item1">
                  <p>登记时间：{{ userinfo.signTime }}</p>
                </div>
                </el-card>
              </template>
            </Userinfo2>
          </div>
          <div class="text item">
            <p>修改信息</p>
            <Userinfo2> 

            </Userinfo2>
          </div> 
          <div class="text item">
            <p>修改密码</p>
            <Userinfo2> </Userinfo2>
          </div>
          <div class="text item">
            <p>关于我们</p>
            <Userinfo2>
              <template #default>
                <div class="text item1">
                  <p>小组成员：...</p>
                </div>
                <div class="text item1">
                  <p>联系方式：我能告诉你？</p>
                </div>
              </template>
            </Userinfo2>
          </div>
          <div class="text item">
            <el-button type="danger" @click="deltoken"> 退出登录 </el-button>
          </div>
        </el-card>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import Userinfo2 from "./userinfo2.vue";
import { DEL_TOKEN } from "../../../store/actionType";
import { createNamespacedHelpers } from "vuex";
let { mapState, mapMutations } = createNamespacedHelpers("user");
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
    };
  },
  components: {
    Userinfo2,
  },
  computed: {
    ...mapState(["userinfo"]),
  },

  methods: {
    ...mapMutations([DEL_TOKEN]),
    deltoken() {
      this[DEL_TOKEN]();
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.header_right {
  // background: yellow;
  height: 100%;
  width: 120px;
  display: flex;
  align-items: center;
  img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
  span {
    font-size: 14px;
    color: #fff;
  }
}

.box-card {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-button {
      width: 40px;
      height: 40px;
    }
  }
  .item:last-child,
  .item1 {
    justify-content: center;
    .el-button {
      width: 200px;
    }
  }
}
</style>